<template>
  <div class="customer-list">
    <span style="font-size: 30px; position: relative; top: -10px"
      >物品库存</span
    >
    <!-- 这里放置表格等内容 -->
    <div class="">
      <el-input
        style="width: 400px; height: 40px; margin: 10px"
        placeholder="请输入表单中的内容进行搜索"
        v-model="searchKeyword"
        @change="getWarehouse"
      >
      </el-input>
    </div>
    <div>
      <el-table
        :data="WarehouseData"
        border
        style="width: 100%"
        class="centered-table"
      >
        <el-table-column prop="igi_id" label="序号"></el-table-column>
        <el-table-column prop="igi_name" label="物品名称"></el-table-column>
        <el-table-column prop="igi_code" label="规格型号"></el-table-column>
        <el-table-column prop="igi_unit" label="单位"></el-table-column>
        <el-table-column prop="igi_quantity" label="数量"></el-table-column>
        <el-table-column
          prop="igi_warehouse"
          label="所在仓库"
        ></el-table-column>
      </el-table>
    </div>

    <el-divider></el-divider>
    <!-- 下划线分隔 -->
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="change1"
      @current-change="Ymchange1"
      :current-page="currentPage1"
      :page-sizes="[10, 15, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rows1"
    >
    </el-pagination>
  </div>
</template>

<script>
import $http from "@/routers/base";
export default {
  data() {
    return {
      searchKeyword: "", //搜索框
      WarehouseData: [], //查询
      currentPage1: 1, //当前页
      pageSize: 10, //每页显示数
      rows1: 0, //总行数
    };
  },
  methods: {
    //库存查询
    getWarehouse() {
      this.where = `1=1`;
      if (this.searchKeyword) {
        this.where += `AND (igi_name LIKE '%${this.searchKeyword}%' OR igi_code LIKE '%${this.searchKeyword}%' OR igi_unit LIKE '%${this.searchKeyword}%' OR igi_quantity LIKE '%${this.searchKeyword}%' OR igi_warehouse LIKE '%${this.searchKeyword}%')`;
      }
      // 向后端请求数据，并更新客户数据和总条数
      $http
        .get("InvGoodsInventory/GetFenYe", {
          params: {
            currentPage: this.currentPage1,
            pageSize: this.pageSize,
            where: this.where,
          },
        })
        .then((res) => {
          this.WarehouseData = res.goodInventoryData;
          this.rows1 = res.rows;
        })
        .catch((error) => {
          console.error("Error fetching client data: ", error);
        });
    },
    change1: function (size) {
      this.pageSize = size;
      this.currentPage1 = 1;
      this.getWarehouse();
    },
    Ymchange1: function (page) {
      this.currentPage1 = page;
      this.getWarehouse();
    },
  },
  mounted() {
    this.getWarehouse();
  },
};
</script>

<style>
/*表格单元格中的文本内容都将水平居中显示*/
.centered-table .el-table__cell {
  text-align: center;
}
/*表格标题背景变色*/
.centered-table .el-table__header th {
  background-color: #eeeeee; /* 设置标题行的背景色 */
  color: #333; /* 设置标题行的文字颜色 */
}

.customer-list {
  background-color: #ffffff;
  padding: 20px;
}

/*按钮的样式*/
.add-button {
  background-color: #4fc1b0;
  color: #ffffff;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.add-button-bottom-right {
  position: fixed;
  bottom: 0;
  top: 110px; /* 将按钮相对于父容器顶部定位 */
  right: 100px;
  margin: 20px; /* 调整按钮与分割线的距离 */
}
.pagination-info {
  margin-bottom: 10px;
  text-align: right; /* 将当前显示条数等信息向右对齐 */
}

/* 调整对话框样式 */
.el-dialog__body {
  padding: 0px 10px 30px 20px; /* 调整内边距 */
}
/* 模态框 */
.qw {
  position: fixed;
  top: 20%;
  left: 10%;

  height: 600px;
  overflow: hidden;
}
</style>
